<!-- 排序选项 -->
<div class="my-3">
    <a href="?" class="btn btn-outline-secondary">时间排序</a>
    <a href="?sort_by=-views" class="btn btn-outline-secondary">热度排序</a>
</div>

<!-- 文章列表 -->
{% for article in page_obj %}
<div class="d-flex flex-column card my-3 p-2" style="height: 180px;">
    <p>
        {{ article.author.username }}
        {{ article.create_at|date:"Y-m-j H:i:s" }}
        浏览量: {{ article.views }}
        评论数：{{ article.comments.count }}
    </p>
    <h4>
        <a href="{{ article.get_absolute_url }}">
            {{ article.title }}
        </a>
    </h4>
    <p>{{ article.content|truncatechars:100 }}</p>
    <p class="mt-auto mb-0">
        <a href="{{ article.category.get_absolute_url}}">{{ article.category }}</a>
    </p>
</div>

{% empty %}
<p>暂无文章</p>
{% endfor %}

<!-- 分页 -->
{% if page_obj.has_other_pages %}
{% include 'blog/pagination.html' %}
{% endif %}